<template>
  <section style="padding-bottom: 30px;">
    <div class="header">
      <span>{{rcarnum}}</span>
      <span>查询结果（{{rlength}}条）</span>
    </div>
    <div style="padding-bottom: 1.2rem;"></div>
    <div v-if="message == '请求成功'">
      <div class="big_pt" style="border: none;margin: 0;">
        <div class="tit">
          <img src="../../assets/index/line.png" class="line">
          <span class="weight">车辆信息</span>
        </div>
        <ul>
          <li>
            <span>维修总金额</span>
            <span>{{serviceSumMoney/100}}元</span>
          </li>
          <li>
            <span>换件总金额</span>
            <span>{{barterSumMoney/100}}元</span>
          </li>
          <li>
            <span>理赔总金额</span>
            <span class="im_col">{{dangerSumMoney/100}}元</span>
          </li>
          <li>
            <span>维修总次数</span>
            <span>{{serviceSumCount}}</span>
          </li>
          <li>
            <span>换件总次数</span>
            <span>{{barterSumCount}}</span>
          </li>
          <li>
            <span>{{VINor}}</span>
            <span>{{rvin}}</span>
          </li>
        </ul>
      </div>

      <div v-for="(item,index) in carArr" :key="index">
        <div class="big_pt">
          <div class="top_t">
            <p class="num_d">{{index+1}}</p>
            <span>出险时间</span>
            <span style="margin-left: 10px;position: relative;top: 1px;" class="im_col">{{item.date.substr(0,10)}}</span>
          </div>
          <div class="tit">
            <span class="weight">出险金额</span>
          </div>
          <ul>
            <li>
              <span>本次维修金额</span>
              <span>{{item.serviceMoney/100}}元</span>
            </li>
            <li>
              <span>本次换件金额</span>
              <span>{{item.barterMoney/100}}元</span>
            </li>
            <li>
              <span>本次其他金额</span>
              <span>{{item.otherMoney/100}}元</span>
            </li>
            <li>
              <span>本次理赔金额</span>
              <span class="im_col">{{item.dangerMoney/100}}元</span>
            </li>
          </ul>
          <div class="tit" style="padding-top: 0;">
            <span class="weight">维修详情</span>
          </div>
          <ul v-for="(item2,index2) in item.project">
            <li>
              <span>理赔项类型</span>
              <span>{{item2.dangerSingleType}}</span>
            </li>
            <li>
              <span>理赔项名称</span>
              <span>{{item2.dangerSingleName}}</span>
            </li>
            <li>
              <span>理赔金额</span>
              <span class="im_col">{{item2.dangerSingleMoney/100}}元</span>
            </li>
          </ul>
        </div>

      </div>
    </div>
    <div v-if="message != '请求成功'">
      <img src="../../assets/sech/no_tip.png" style="width: 4rem;margin-top: .86rem;">
      <p style="margin-top: .3rem;color: #666;">{{message}}</p>
    </div>
  </section>
</template>

<script>
  export default {
    name: "carDangerResult",
    data() {
      return {
        rcarnum: '',
        VINor: '',
        message: '',
        rlength: '',
        serviceSumMoney: '',
        serviceSumCount: '',
        barterSumMoney: '',
        barterSumCount: '',
        dangerSumMoney: '',
        carArr: [],
        rvin: '',
      }
    },
    created() {
      let obj = JSON.parse(sessionStorage.getItem('TO_OBJECT'));
      console.log(obj)
      this.message = obj.message;
      this.rcarnum = obj.carnum == '' ? obj.carvin : obj.carnum;
      this.VINor = obj.carnum == '' ? '车牌号' : 'VIN';
      if (obj.message == '请求成功') {
        this.rlength = obj.carArr.length;
        this.serviceSumMoney = obj.serviceSumMoney;//维修总金额
        this.serviceSumCount = obj.serviceSumCount;//维修总次数
        this.barterSumMoney = obj.barterSumMoney;//换件总金额
        this.barterSumCount = obj.barterSumCount;//换件总件数
        this.dangerSumMoney = obj.dangerSumMoney;//理赔总金额
        this.carArr = obj.carArr;
        if (obj.carArr.length > 1) {
          this.rvin = obj.carnum == '' ? obj.carArr[0].plateNumber : obj.carArr[0].vin;
        } else {
          this.rvin = '';
        }

      } else {
        this.rlength = 0;
      }
    }
  }
</script>

<style scoped>
  .header {
    width: 100%;
    height: .8rem;
    display: flex;
    align-items: center;
    box-shadow: 2px 2px 10px rgba(128, 128, 128, .3);
    padding-left: .3rem;
    position: fixed;
    left: 0;
    top: 0;
    background: #fff;
    z-index: 999;
  }

  .header span:nth-child(2) {
    margin-left: .2rem;
  }

  .line {
    width: 5px;
    height: 25px;
    position: absolute;
    left: 0;
  }

  .tit {
    display: flex;
    align-items: center;
    padding: .3rem 0;
  }

  .big_pt {
    /*margin-top: .4rem;*/
    padding: 0rem .3rem 0rem .3rem;
    box-shadow: 2px 2px 10px rgba(128, 128, 128, .2);
    margin: .4rem .2rem 0 .2rem;
    border-top: 2px solid red;
    border-radius: 2px;
  }

  .big_pt ul {
    padding-top: .3rem;
    border-top: 1px solid #f2f2f2;
  }

  .big_pt li {
    display: flex;
    text-align: left;
    padding-bottom: .3rem;
    align-items: center;
  }
  .big_pt li span:nth-child(1) {
    width: 2.4rem;
    color:#929292;
    flex: none;
  }
  .im_col {
    color: #31AEEF;
  }

  .weight {
    font-weight: bold;
  }
  .num_d{
    height: .4rem;
    background: #B5B5B5;
    color: #fff;
    border-radius: 3px;
    font-size: .24rem;
    line-height: .4rem;
    margin-right: 10px;
    padding: 0 .25rem;
  }
  .top_t{
    display: flex;
    align-items: center;
    padding: .3rem 0;
    border-bottom: 1px solid #f2f2f2;
  }
</style>
